<template>
  <div>
    <div id="echart-main" :style="{ height: '300px'}"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "home1",
  props:{searchList:Object},
  data() {
    return {
      chat: null,
    }
  },
  methods: {
    setChatOption () {
      this.chat.setOption({
        title: {
          text: '投资金额统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {
          data: ['收入', '支出']
        },
        xAxis: [
          {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type:'value',
            name:'金额',
            min: 0,
            max: 300,
            interval: 50,
            axisLabel: {
              formatter:'{value}万'
            }
          },
        ],
        series: [
          {
            name: '收入',
            type: 'bar',
            data: [
              this.searchList.num1*10,
              this.searchList.num2*10,
              this.searchList.num3*10,
              this.searchList.num4*10,
              this.searchList.num5*10,
              this.searchList.num3*10,
              this.searchList.num5*10
            ]
          },
          {
            name: '支出',
            type: 'bar',
            data: [
              this.searchList.num1*8,
              this.searchList.num2*8,
              this.searchList.num3*8,
              this.searchList.num4*8,
              this.searchList.num5*8,
              this.searchList.num3*8,
              this.searchList.num5*8
            ]
          }
        ]
      });
    }
  },
  mounted() {
    this.chat = echarts.init(document.getElementById('echart-main'));
  },
  watch: {
    searchList (newVal) {
      console.log("new",newVal)
      this.setChatOption();
    }
  }
}
</script>
<style scoped>

</style>